<template>
  <!-- 评论管理 -->
  <div class="talk">
    <div class="talk-box">
      <!-- 输入框 -->
      <div class="talk-box1">
        <div class="talk-box1-input">
          商品名：<el-input
            style="width: 220px"
            v-model="input"
            placeholder="请输入内容"
            size="small"
          ></el-input>
        </div>
        <div class="talk-box1-input1">
          审核状态：<el-select
            style="width: 220px"
            v-model="value"
            placeholder="请选择 审核状态"
            size="small"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="talk-box1-right">
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
          <el-button icon="el-icon-delete">清空</el-button>
        </div>
      </div>
      <!-- 刷新 -->
      <div class="talk-box2">
        <el-button icon="el-icon-refresh" circle></el-button>
        <el-button icon="el-icon-search" circle></el-button>
      </div>
      <!-- 表格 -->
      <div>
        <el-table
          :data="tableData"
          border
          style="width: 100%; height: 250px"
          header-cell-style="background: #f4f4f4;color: #000"
        >
          <el-table-column
            prop="date"
            label="序号"
            width="50"
            align="center"
            type="index"
          >
          </el-table-column>
          <el-table-column
            prop="date"
            label="商品名"
            width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="用户昵称"
            width="110"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="记录时间"
            width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="回复时间"
            width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="评价得分"
            width="110"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="是否匿名"
            width="110"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="审核状态"
            width="110"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="address" label="操作" align="center">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { getList } from "@/api/keven.js";
export default {
  data() {
    return {
      input: "",
      // 下拉框
      options: [
        {
          value: "选项1",
          label: "待审核",
        },
        {
          value: "选项2",
          label: "审核通过",
        },
        {
          value: "选项3",
          label: "审核未通过",
        },
      ],
      value: "",
      // 表格
      tableData: [],
    };
  },
  methods: {
    getList() {},
  },
};
</script>

<style scoped>
.talk {
  padding: 20px;
  background-color: #ebeeef;
}
.talk-box {
  padding: 20px;
  height: 87vh;
  background-color: #fff;
}
.talk-box1 {
  display: flex;
  color: #939697;
  font-size: 14px;
}
.talk-box1-input {
  display: flex;
  align-items: center;
  margin-left: 30px;
}
.talk-box1-input1 {
  margin-left: 20px;
}
.talk-box1-right {
  margin-left: 60px;
}

.talk-box2 {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>